<template>
  <div class="main">
  	<div class="cart">
  		<div class="cart_header">
  			<a href="javascript:window.history.back(-1)"></a>
  			<p>购物车</p>
  		</div>
  		<div class="cart_list">
  			<p class="empty_prds" v-show="list.length == 0">不存在您挑选的商品</p>
  			<ul>
  				<li v-for="(item,index) in list" :class={sel:item.selected} @click="select(index)">
  					<div class="proImg">
  						<a :href="item.link"><img :src="item.src" :alt="item.title" /></a>
  					</div>
  					<div class="proInfo">
  						<a :href="item.link" class="title">{{ item.title }}</a>
  						<span class="color">颜色：{{ item.parameter }}</span>
  						<div class="previous">
  							<ul>
  								<li class="control">
  									<span @click="reduce(index)" class="reduce">-</span>
  									<input type="text" name="num" class="num" v-model="item.num" />
  									<span @click="add(index)" class="add">+</span>
  								</li>
  								<li class="total">
  									<span>${{ item.total }}.00</span>
  								</li>
  								<li class="remove">
  									<a href="javascript:;" @click="remove(index)"></a>
  								</li>
  							</ul>
  						</div>
  					</div>
  				</li>
  			</ul>
  		</div>
  		<div class="settlement">
  			<ul>
  				<li class="selected">
  					<input type="checkbox" @click="checkbox()" :checked="checkSel" id="checkbox" name="" />
  					<label for="checkbox">全选</label>
  				</li>
  				<li class="total">
  					总共：<span class="num">{{ totalmoney }}</span>
  					<span class="yf">不含运费</span>
  				</li>
  				<li class="btn">
  					<a href="#">结算 <span>({{ totalnum }})</span></a>
  				</li>
  			</ul>
  		</div>
  	</div>
  </div>
</template>

<script>
  export default {
	data (){
		return {
			arr: [],
			list: [

			]
        }
	},
	computed: {
		// 总数计算
		totalnum (){
			let result = 0;
			for (var i = 0; i < this.list.length; i++) {
				if (this.list[i].selected && this.list[i].num) {
					result += Number.parseInt(this.list[i].num);
					this.list[i].total = this.arr[i] * Number.parseInt(this.list[i].num);
				}
			}
			return result;
		},
		// 总价格计算
		totalmoney (){
			let result = 0;
			for (var i = 0; i < this.list.length; i++) {
				if (this.list[i].selected) {
					result += Number.parseFloat(this.list[i].total);
				}
			}
			return result;
		},
		// 检测全选
		checkSel (){
			for (var i = 0; i < this.list.length; i++) {
				if (this.list[i].selected == true) {
					return true;
				}else{
					return false;
				}
			}
		},
		// 从状态取内容
		getter (){
			this.list = this.$store.getters.getCart;
			for (var i = 0; i < this.list.length; i++) {
				this.arr.splice(i,1);
				this.arr.push(this.list[i].total);
			}
		}
	},
	methods: {
		// 数量减
		reduce (index){
			if (this.list[index].num > 1) {
				this.list[index].num --;
				this.list[index].total = this.arr[index] * Number.parseInt(this.list[index].num);
			}
		},
		// 数量加
		add (index){
			if (this.list[index].num < 10) {
				this.list[index].num ++;
				this.list[index].total = this.arr[index] * Number.parseInt(this.list[index].num);
			}
		},
		// 选择选中
		select (index,ev){
			var ev = window.event || ev;
			if (ev.target.className == 'add' || ev.target.className == 'remove' || ev.target.className == 'reduce' || ev.target.className == 'num') {
				return;
			}else{
				this.list[index].selected = !this.list[index].selected;
			}
		},
		// 删除
		remove (index){
			this.$store.dispatch('delate_cart',index);
			alert('删除成功！');
		},
		// 全选
		checkbox (){
			for (var i = 0; i < this.list.length; i++) {
				this.list[i].selected = !this.list[i].selected;
			}
		}
	},
	created (){
		this.getter;
	},
    watch: {
        $route(){
        	this.getter;
        }
    },
  }
</script>
<style>
	.header,.footer,.toolbar{display:none;}
	.cart{
		overflow:hidden;
	}
	.cart_header{
		width:100%; background:#eb6100; height:.48rem; text-align:center; overflow:hidden;
	}
	.cart_header p{
		font-size:.2rem; color:#fff; line-height:.48rem; width:2.9rem;
	}
	.cart_header a{
		float:left; width:.3rem; background:url('../assets/return.png') center center no-repeat; display:block; height:.48rem; background-size:.17rem auto;;
	}
	.cart_list{
		overflow:hidden; background:#f7f7f7;
	}
	.cart_list .empty_prds{
		padding:30px;text-align:center; color:#959595;
	}
	.cart_list ul{
		overflow:hidden;
	}
	.cart_list>ul>li{
		border:#e1e1e1 .01rem solid; margin:3%; background:#fff; overflow:hidden; padding:4% 2% 3% 4%; position:relative;
	}
	.cart_list>ul>.sel{
		border:#eb6100 .01rem solid;
	}
	.cart_list>ul>.sel:after{
		display:block; content:''; width:.4rem; height:.39rem; background:#eb6100 url('../assets/cart-selected.png') right top no-repeat;  position:absolute; right:0; top:0; background-size:.4rem .39rem;
	}
	.cart_list li .proImg{
		width:20%; float:left; margin-right:4%; overflow:hidden;
	}
	.cart_list li .proImg img{
		width:100%;
	}
	.cart_list li .proInfo{
		width:75%; float:left;
	}
	.cart_list li .proInfo .title{
		color:#4d4c4c; font-size:.15rem; margin:0 0 .08rem; height:.38rem; overflow:hidden; display:block;
	}
	.cart_list li .proInfo .color{
		color:#b5b5b5; line-height:.18rem; display:block; margin:0 0 .08rem;
	}
	.cart_list li .previous{
		overflow:hidden;
	}
	.cart_list .previous li{
		float:left; overflow:hidden;
	}
	.cart_list .previous .total span{
		font-size:.15rem; color:#eb6100; margin-left:.05rem;
	}
	.cart_list .previous .remove{
		float:right;
	}
	.cart_list .previous .remove a{
		display:inline-block; background:url(../assets/delete.jpg) center center no-repeat; width:.28rem; height:.22rem; background-size:55%;
	}
	.cart_list .previous .control{
		width:48%;
	}
	.cart_list .previous li input{
		display:inline-block; width:.46rem; height:.22rem; text-align:center; color:#959595; border:none; border-top:#eee .01rem solid; border-bottom:#eee .01rem solid; outline:none; vertical-align:middle;
	}
	.cart_list .previous .control span{
		color:#D4D4D4; display:inline-block; width:.18rem; height:.24rem; background:#f7f7f7; text-align:center; cursor:pointer; border:0.01rem solid #eee; vertical-align:middle; font-size:.19rem;
	}
	.settlement{
		width:100%; overflow:hidden; height:.57rem; backrgound:#fff; border-bottom:.01rem solid #e1e1e1; margin:.55rem auto 0;
	}
	.settlement li{
		float:left; height:.53rem; line-height:.57rem;
	}
	.settlement .selected{
		width:.5rem; margin:0 0.08rem 0; font-size:.13rem; border-right:0.01rem solid #e1e1e1; padding-right:.08rem;
	}
	.settlement .total{
		width:1.1rem; margin:0 0 0 .1rem; font-size:.13rem;
	}
	.settlement .total .num{
		color:#eb6100;
	}
	.settlement .total .yf{
		color:#b5b5b5;
	}
	.settlement .btn{
		height:.57rem; width:1.23rem; float:right;
	}
	.settlement .btn a{
		display:block; width:100%; background:#eb6100; color:#fff; font-size:.2rem; text-align:center; height:.57rem;line-height:.57rem;
	}
</style>